React Getting Started

セットアップ

code:sh

cd ~/src

npx create-react-app hello-react

cd hello-react

Hello World

code:js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<h1>Hello</h1>);

JSX

code:js

const root = ReactDOM.createRoot(document.getElementById('root'));

const element = <h1>Hello</h1>;

root.render(element);

JSXに式を埋め込む

code:js

const root = ReactDOM.createRoot(document.getElementById('root'));

const name = 'takashi';

const element = <h1>Hello, {name}</h1>;

root.render(element);

JSXで属性を指定する

ダブルクォートで属性を指定

code:js

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(element);

中括弧で属性を指定

code:js

const root = ReactDOM.createRoot(document.getElementById('root'));

const element = <img src={avatarUrl} />;

root.render(element);

JSXはReact.createElementのシンタックスシュガー

以下の2つのコードは等価

code:js

const element = (

<h1 className="greeting">

Hello, world!

</h1>

);

code:js

const element = React.createElement(

'h1',

{className: 'greeting'},

'Hello, world!'

);

要素のレンダー

秒刻みで動く時計。DOM全体を書き換えてるが、実際には変更が必要な箇所のみ更新される。

code:js

const root = ReactDOM.createRoot(

document.getElementById('root')

);

function tick() {

const element = (

<div>

<h1>Hello, world!</h1>

<h2>It is {new Date().toLocaleTimeString()}.</h2>

</div>

);

root.render(element);

}

setInterval(tick, 1000);

https://gyazo.com/a59272f89c4ba3cc1b88f8c463060c82

ClockをReactっぽく書き直し

上記のタイマーをReactっぽく書き直し。

code:js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

function App(props) {

return (

<div>

aaa

<Hello name="thata"/>

<Clock />

</div>

);

}

function Hello(props) {

return (

<h1>Hello, {props.name}!!</h1>

);

}

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = {

date: new Date(),

};

}

componentDidMount() {

this.timerId = setInterval(

() => this.tick(),

1000

);

}

componentWillUnmount() {

clearInterval(this.timerId);

}

tick() {

this.setState({

date: new Date(),

});

}

render() {

return (

<div>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

}

const root = ReactDOM.createRoot(

document.getElementById('root')

);

root.render(<App />);

useStateとuseEffectを使って書き直し

code:js

import React, { useState, useEffect } from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

function App(props) {

return (

<div>

<Hello name="thata"/>

<Clock />

</div>

);

}

function Hello(props) {

return (

<h1>Hello, {props.name}!!</h1>

);

}

function Clock(props) {

// マウント時にのみ実行される

useEffect(() => {

function tick() {

setDate(new Date());

}

let timerId = setInterval(

() => tick(),

1000

);

// 後始末

return function clerInterval() {

clearInterval(timerId);

};

}, []);

return (

<div>

<h2>It is {date.toLocaleTimeString()}.</h2>

</div>

);

}

const root = ReactDOM.createRoot(

document.getElementById('root')

);

root.render(<App />);

イベント処理

（明日はここから）